// 这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
    // 用 chainWebpack 声明一个配置节点
    chainWebpack: config => {
        // 调用 config.when 函数判断当前处于什么编译模式(开发阶段或者发布阶段)
        // 如果当前处于 production (生产模式、发布模式)阶段，则执行回调函数
        config.when(process.env.NODE_ENV === 'production', config => {
                // 通过 config.entry 得到默认的打包入口
                config
                    .entry('app')
                    // 调用 clear() 清除默认的打包入口
                    .clear()
                    // 通过 add() 新增一个自己的打包入口文件
                    .add('./src/main-prod.js')

                config.set('externals', {
                    // 只要在打包期间发现用到这个包，就会去window全局查找并使用对应的对象
                    vue: 'Vue',
                    'vue-router': 'VueRouter',
                    axios: 'axios',
                    lodash: '_',
                    echarts: 'echarts',
                    nprogress: 'NProgress',
                    'vue-quill-editor': 'VueQuillEditor'
                })

                // 通过config.plugin 找到 html 插件，然后通过 tap 链式操作修改插件里面的参数
                // args 是当前插件里面的参数项
                config.plugin('html').tap(args => {
                    // 给 args 新增一个参数
                    // 给插件 html 加了一个 isProd 属性
                    args[0].isProd = true
                    return args
                })
            })
            // 如果函数处于 development (开发模式)，则执行回调函数
        config.when(process.env.NODE_ENV === 'development', config => {
            // 通过 config.entry 得到默认的打包入口
            config
                .entry('app')
                // 调用 clear() 清除默认的打包入口
                .clear()
                // 通过 add() 新增一个自己的打包入口文件
                .add('./src/main-dev.js')

            // 通过config.plugin 找到 html 插件，然后通过 tap 链式操作修改插件里面的参数
            // args 是当前插件里面的参数项
            config.plugin('html').tap(args => {
                // 给插件 html 加了一个 isProd 属性
                args[0].isProd = false
                return args
            })
        })
    }
}